/* 定制季度样式 */
::ng-deep .ant-calendar-footer {
  padding: 0;
}
.quarter-wrap {
  ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    text-align: center;

    li {
      list-style: none;
      flex: 1;
      line-height: 2rem;
      //border-right: 1px solid #e8e8e8;
      cursor: pointer;
      transition: all 0.3s ease-out 0s;

      &.active {
        color: #fff;
        background: #1890ff;

        &:hover {
          color: #fff;
          background: #1890ff;
        }
      }

      //&:last-child {
      //  border-right: none;
      //}

      &:hover {
        color: #40a9ff;
        background-color: #e6f7ff;
      }
    }
  }
}
.confirm-wrap {
  border-top: 1px solid #e8e8e8;
  text-align: right;

  .confirm-btn {
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid #1890ff;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    padding: 0 7px;
    margin-right: 12px;
    color: #fff;
    background-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 0 rgba(0,0,0,.045);
    height: 24px;
    font-size: 14px;
    border-radius: 4px;
    line-height: 22px;
    outline: 0;

    &:hover {
      color: #fff;
      background-color: #40a9ff;
      border-color: #40a9ff;
    }
  }
}

/* 设置时间控件主题1样式 */
::ng-deep .theme1 {
  .ant-calendar-picker-input {
    border: 0;
    background: url('./../../../../assets/images/select_bg1.png') no-repeat left center !important;
    background-size: 100% !important;
    height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    outline: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;

    &:focus{
      outline: none;
      box-shadow: none;
    }
  }

  .ant-calendar-picker-icon {
    display: none;
  }

  .ant-calendar{
    border: 1px solid #242e5e;
  }

  .ant-calendar-decade-panel-prev-century-btn,
  .ant-calendar-decade-panel-next-century-btn,
  .ant-calendar-year-panel-prev-decade-btn,
  .ant-calendar-year-panel-next-decade-btn,
  .ant-calendar-month-panel-prev-year-btn,
  .ant-calendar-month-panel-next-year-btn,
  .ant-calendar-prev-year-btn,
  .ant-calendar-prev-month-btn,
  .ant-calendar-next-year-btn,
  .ant-calendar-next-month-btn{
    color: #40a9ff;
  }

  .ant-calendar-month-panel-month,
  .ant-calendar-year-panel-decade-select,
  .ant-calendar-month-panel-year-select,
  .ant-calendar-year-panel-year,
  .ant-calendar-decade-panel-century,
  .ant-calendar-decade-panel-decade,
  .ant-calendar-month-select,
  .ant-calendar-year-select,
  .ant-calendar-column-header,
  .ant-calendar-date,
  .ant-calendar-day-select{
    color: #fff;
  }

  .ant-calendar-selected-day .ant-calendar-date,
  li.ant-calendar-time-picker-select-option-selected,
  .ant-calendar-time-picker-select li:hover{
    color: rgba(0,0,0,.65);
  }

  .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year,
  .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
  .ant-calendar-disabled-cell .ant-calendar-date{
    color: #000;
    background: rgb(35, 58, 135) !important;
  }

  .ant-calendar-month-panel,
  .ant-calendar-year-panel,
  .ant-calendar-decade-panel,
  .ant-calendar-panel{
    background: rgb(35, 58, 135);
  }

  .ant-calendar-input-wrap, .ant-calendar-header,
  .ant-calendar-year-panel-header,
  .ant-calendar-decade-panel-header,
  .ant-calendar-month-panel-header{
    border-bottom: 1px solid #bebebe;
  }

  .ant-calendar-input-wrap,
  .ant-calendar-input,
  .ant-calendar-time-picker-inner{
    background: rgb(35, 58, 135);
    color: #fff;
  }
  .ant-calendar-input-wrap{
    display: none;
  }

  .ant-calendar-picker-clear {
    background: #1369c0 !important;
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  .ant-calendar-picker-input {
    box-shadow: none !important;
    &:focus{
      box-shadow: none !important;
    }
  }

  .ant-calendar-time-picker-select-option-disabled {
    display: none;
  }
}

/* 设置时间控件主题2和主题3样式 */
::ng-deep {
  .theme2, .theme3 {
    .ant-calendar-picker-input {
      border: 0;
      background: url('./../../../../assets/images/select_bg2.png') no-repeat left center !important;
      background-size: 100% 100% !important;
      height: 2rem;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2rem;
      outline: none;
      box-shadow: none;
      color: #fff;
      cursor: pointer;

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    &.theme3 {
      .ant-calendar-picker-input {
        background: url('./../../../../assets/images/select_bg3.png') no-repeat left center !important;
        background-size: 100% 100% !important;
      }
    }

    .ant-calendar-picker-icon {
      display: none;
    }

    .ant-calendar {
      border: 1px solid #242e5e;
    }

    .ant-calendar-decade-panel-prev-century-btn,
    .ant-calendar-decade-panel-next-century-btn,
    .ant-calendar-year-panel-prev-decade-btn,
    .ant-calendar-year-panel-next-decade-btn,
    .ant-calendar-month-panel-prev-year-btn,
    .ant-calendar-month-panel-next-year-btn,
    .ant-calendar-prev-year-btn,
    .ant-calendar-prev-month-btn,
    .ant-calendar-next-year-btn,
    .ant-calendar-next-month-btn {
      color: #40a9ff;
    }

    .ant-calendar-month-panel-month,
    .ant-calendar-year-panel-decade-select,
    .ant-calendar-month-panel-year-select,
    .ant-calendar-year-panel-year,
    .ant-calendar-decade-panel-century,
    .ant-calendar-decade-panel-decade,
    .ant-calendar-month-select,
    .ant-calendar-year-select,
    .ant-calendar-column-header,
    .ant-calendar-date,
    .ant-calendar-day-select {
      color: #fff;

      &:hover {
        color: #afb8c4;
        background: #4A5061;
      }
    }

    .ant-calendar-last-month-cell .ant-calendar-date,
    .ant-calendar-next-month-btn-day .ant-calendar-date {
      color: #afb8c4;

      &:hover {
        color: #afb8c4;
      }
    }

    .ant-calendar-selected-day .ant-calendar-date {
      color: #fff;
      background: #1890ff;

      &:hover {
        color: #fff;
        background: #1890ff;
      }
    }

    .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
      &:hover {
        color: #fff;
        background: #1890ff;
      }
    }

    .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
      &:hover {
        color: #fff;
        background: #1890ff;
      }
    }

    .ant-calendar-selected-day .ant-calendar-date,
    li.ant-calendar-time-picker-select-option-selected,
    .ant-calendar-time-picker-select li:hover {
      //color: rgba(0, 0, 0, .65);
      color: #fff;
    }

    .ant-calendar-year-panel-cell-disabled .ant-calendar-year-panel-year,
    .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
    .ant-calendar-disabled-cell .ant-calendar-date {
      color: #585f78;
      background: #2c354f !important;

      &:hover {
        color: #585f78;
        background: #2c354f !important;
      }
    }

    .ant-calendar-month-panel,
    .ant-calendar-year-panel,
    .ant-calendar-decade-panel,
    .ant-calendar-panel {
      //background: rgb(35, 58, 135);
      background: #121628;
      border-radius: 0;
    }

    .ant-calendar-input-wrap, .ant-calendar-header,
    .ant-calendar-year-panel-header,
    .ant-calendar-decade-panel-header,
    .ant-calendar-month-panel-header {
      //border-bottom: 1px solid #bebebe;
      border-bottom: 1px solid rgba(190, 190, 190, 0.5);
    }

    .ant-calendar-header a:hover {
      color: #afb8c4;
    }

    .ant-calendar-input-wrap,
    .ant-calendar-input,
    .ant-calendar-time-picker-inner {
      background: rgb(35, 58, 135);
      color: #fff;
    }

    .ant-calendar-input-wrap {
      display: none;
    }

    .ant-calendar {
      table, td, th {
        color: #fff;
      }
    }

    .ant-calendar-week-number .ant-calendar-body tr {
      &.ant-calendar-active-week {
        background: rgb(35, 58, 135);
      }
      &:hover {
        color: #afb8c4;
        background: #4A5061;
      }
    }

    .ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day {
      .ant-calendar-date {
        color: #fff;
      }

      &:hover {
        .ant-calendar-date {
          color: #fff;
        }
      }
    }

    .ant-calendar-picker-clear {
      background: #1369c0 !important;
      border-radius: 50%;
      margin-right: 0.5rem;
    }

    .ant-calendar-picker-input {
      box-shadow: none !important;

      &:focus {
        box-shadow: none !important;
      }
    }

    .ant-calendar-time-picker-select-option-disabled {
      display: none;
    }

    .ant-calendar-footer {
      background: #121628;
      border-top: 1px solid rgba(190, 190, 190, 0.5);

      .quarter-wrap {
        ul {
          li {
            color: #fff;

            &:hover {
              color: #afb8c4 !important;
              background-color: #4A5061 !important;
            }
          }
        }
      }
      .confirm-wrap {
        border-top: 1px solid rgba(190, 190, 190, 0.5);
      }
    }
  }
}
